<template>
  <div class="home-container">
    <div class="header-container" @click="headerClick()">
      <div style="width: 60px;height: 60px;border-radius: 5px">
        <img style="width: 60px;height: 60px" src="@/assets/home/实时监控.png">
      </div>
      <span class="title">天津好乐唯监控系统</span>
    </div>
    <div class="center-container">
      <div class="left-container">
        <el-row :gutter="2">
          <el-col :span="12" v-for="(item,index) in videoList" >
            <div class="grid-content" :class="activeIndex==index?'active':''"  @click="videoClick(index)" >
<!--              <div class="video-header-bar">{{item.deviceName}}</div>-->
              <e-video :id="'video-'+index" :deviceSerial="item.deviceSerial" :channel-no="item.channelNo"/>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="right-container">
        <div class="device-container" v-for="item in deviceList" @click="deviceClick(item)">
          <div class="avatar">
            <img src="@/assets/home/摄像头.png">
          </div>
          <div class="device-info">
            <div class="device-name" :title="item.channelName">{{item.channelName}}</div>
            <div class="device-status">
              <div class="status" :class="item.status == 1?'ok':'error'"></div>
              <div class="status-text">{{item.status == 1?'在线':'离线'}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import EVideo from "@/components/EVideo.vue";
import HomeApi from '@/api/home'
export default {
  name: "Home",
  components:{
    EVideo
  },
  data(){
    return{
      videoList:[],
      deviceList:[],
      activeIndex :-1
    }
  },
  mounted() {
    this.getCameraList()
    this.getInitDevice()
  },
  methods:{
    async getDeviceList(){
      const res = await HomeApi.getDeviceList()
      if(res.respCode == '0'){
        this.deviceList = res.data
        this.deviceList.forEach(item=>{
          if(this.videoList.length < 4){
            if(item.status ==1){
              const obj ={
                deviceName:item.deviceName,
                deviceSerial:item.deviceSerial
              }
              this.videoList.push(obj)
            }
          }
        })
      }else {
        this.$message.info(res.message)
        await this.$router.push({ path: '/login' })
      }

    },
    async getInitDevice(){
      const res =  await HomeApi.getInitDevice()
      this.videoList = JSON.parse(JSON.stringify(res.data))
    },
    async getCameraList(){
      const res =  await HomeApi.getCameraList()
      let arr = []
      let arr2 = []
      const data = res.data
      data.forEach(item =>{
        if(item.status == 1){
          arr.push(item)
        }else {
          arr2.push(item)
        }
      })
      let list = [...arr,...arr2]
      this.deviceList = list
    },


    videoClick(index){
      this.activeIndex = index
    },
    async deviceClick(item){
      if(this.activeIndex == -1){
        this.$message.warning("请选择监控窗口")
      }
      this.videoList[this.activeIndex].deviceSerial = item.deviceSerial
      this.videoList[this.activeIndex].channelNo = item.channelNo
      await HomeApi.editInitDevice({index:this.activeIndex,deviceSerial:item.deviceSerial,channelNo:item.channelNo})
    },
    headerClick(){
      this.activeIndex = -1
    },
  }
}
</script>

<style scoped lang="scss">
.el-row{
  height: 100%;
  .el-col{
    height: calc(50% - 2px);
    margin-bottom: 2px;
    border: 1px solid #161823;
  }
}
.grid-content{
  width: 100%;
  height: 100%;

  //border: 1px solid #1afa29;
  position: relative;
  .video-header-bar{
    position: absolute;
    right: 0;
    top: 10px;
    text-align: right;
    color: #FFFFFF;
    font-size: 16px;
    padding-right: 20px;
    line-height: 30px;
  }
}
.active{
  border: 1px solid #1afa29;
}
.home-container{
  height: 100%;
  width: 100%;
  background: #010310;
  .header-container{
    height: 70px;
    width: calc(100% - 40px);
    ///* border: 1px solid #0f3362; */
    ///* border-radius: 4px; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background: #161823;
    padding:0 20px;
    .title{
      font-size: 28px;
      color: #FFFFFF;
      margin-left: 15px;
      letter-spacing: 0.1em
    }
  }
  .center-container{
    margin: 10px;
    height: calc(100% - 90px);
    display: flex;
    flex-direction: row;
    .left-container{
      width: calc(100% - 400px);
      height: 100%;
    }
    .right-container{
      height: 100%;
      width: 400px;
      margin-left: 10px;
      background: #161823;
      overflow-y: auto;
      overflow-x: hidden;
      .device-container{
        padding:10px 15px;
        height: 80px;
        margin-right: 10px;
        width: calc(100% - 30px);
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        &:hover{
          background: #909399;
        }
        .avatar{
          height: 60px;
          width: 60px;
          border-radius: 8px;
          background: #13227a;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          img{
            height: 45px;
            width: 45px;
          }
        }
        .device-info{
          width: calc(100% - 70px);
          height: 60px;
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .device-name{
            font-size: 20px;
            color: #FFFFFF;
            height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .device-status{
           height: 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            .status{
              height: 10px;
              width: 10px;
              border-radius: 2px;
            }
            .ok{
              background: #1afa29;
            }
            .error{
              background: #d81e06;
            }
            .status-text{
              margin-left: 10px;
              font-size: 16px;
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }
}

</style>
